<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div id="main" style="width: 50%;height:600px; margin-top: 40px;float: left">

    </div>

    <div id="main1" style="width: 50%;height:600px; margin-top: 40px;float: right">

    </div>
</div>

</div>


<script>
    new Vue({
        el: "#app",
        data() {
            return{
                name:[],
                total:[],
                value:[],
                data:[],
            };
        },

        created() {
            //先获取数据赋值给data中相关的参数，再对echarts进行设置
            axios.get("/statistical/userInfo").then(resp=>{
                this.name = resp.data.data.name;
                this.total = resp.data.data.total;
                this.value = resp.data.data.value;
                this.data = resp.data.data.data;
                console.log(this.data)
                this.initEcharst();
                this.initEcharst1();
            });


        },
        methods: {
            initEcharst(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                myChart.setOption({
                    title: {
                        text: '患者预约次数',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: this.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });

            },
            initEcharst1(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main1'));

                myChart.setOption({
                    title: {
                        text: '患者预约总花销',
                        textStyle: {
                            color: '#235894'
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.name,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.total,
                            type: 'line'
                        }
                    ]
                });

            },
        },
    })
</script>

</body>
</html>